import { observer } from "@Store";
import { LoginService } from "@service";
import { useEffect, useState } from "react";
import { Input, Space } from "antd";
import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
import Style from "./index.module.scss";

export default observer(() => {
  // 将变量变成响应式
  const [captcha, setCaptcha] = useState<string | ArrayBufferLike>();
  // 这个hook调用接口
  useEffect(() => {
    // 获取验证码
    LoginService.getCaptcha().then((res) => {
      res = `data:image/png;base64,${btoa(
        new Uint8Array(res as ArrayBufferLike).reduce(
          (data, byte) => data + String.fromCharCode(byte),
          ""
        )
      )}`;
      setCaptcha(res);
    });
  }, []);
  return (
    <>
      <div className={Style.tip}>这是登录页面</div>
      <Space direction="vertical">
        <Input.Password placeholder="input password" />
        <Input.Password
          placeholder="input password"
          iconRender={(visible) =>
            visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
          }
        />
      </Space>
      <img src={captcha as string} alt="" />
    </>
  );
});
